<!-- 供货商订单管理页面 -->
<template>
  <div>
    <base-table ref="table" :search-params="searchParams" :columns="columnsAction" :async-fc="page">
      <template #tableHeader>
        <t-button @click="refresh">刷新</t-button>
      </template>
    </base-table>
    <t-dialog v-model:visible="modalOpen" width="45%" @confirm="onModalSubmit">
      <div class="order-detail">
        <div v-if="submitForm.cover" class="detail-header">
          <img :src="submitForm.cover" alt="商品封面" class="goods-cover" />
        </div>
        <div class="detail-content">
          <div class="detail-item">
            <span class="label">订单编号：</span>
            <span class="value">{{ submitForm.orderNo }}</span>
          </div>
          <div class="detail-item">
            <span class="label">商品名称：</span>
            <span class="value">{{ submitForm.goodsName }}</span>
          </div>
          <div v-if="submitForm.description" class="detail-item">
            <span class="label">商品描述：</span>
            <span class="value">{{ submitForm.description }}</span>
          </div>
          <div class="detail-item">
            <span class="label">商品单价：</span>
            <span class="value">¥{{ submitForm.price }}</span>
          </div>
          <div class="detail-item">
            <span class="label">购买数量：</span>
            <span class="value">{{ submitForm.quantity }}</span>
          </div>
          <div class="detail-item">
            <span class="label">总金额：</span>
            <span class="value">¥{{ submitForm.totalAmount }}</span>
          </div>
          <div class="detail-item">
            <span class="label">商品类型：</span>
            <span class="value">{{ submitForm.type === 0 ? '自营商品' : '供货商商品' }}</span>
          </div>
          <div class="detail-item">
            <span class="label">订单状态：</span>
            <span class="value">
              <t-tag :theme="getStatusTheme(submitForm.status)">{{ getStatusText(submitForm.status) }}</t-tag>
            </span>
          </div>
          <div class="detail-item">
            <span class="label">收货人：</span>
            <span class="value">{{ submitForm.consignee }}</span>
          </div>
          <div class="detail-item">
            <span class="label">联系电话：</span>
            <span class="value">{{ submitForm.mobile }}</span>
          </div>
          <div class="detail-item">
            <span class="label">收货地址：</span>
            <span class="value">{{ submitForm.address }}</span>
          </div>
          <div class="detail-item">
            <span class="label">创建时间：</span>
            <span class="value">{{ formatTime(submitForm.createTime) }}</span>
          </div>
          <div v-if="submitForm.remark" class="detail-item">
            <span class="label">备注：</span>
            <span class="value">{{ submitForm.remark }}</span>
          </div>
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import { FormInstanceFunctions, Link, MessagePlugin, Space, Tag } from 'tdesign-vue-next';
import { computed, ref } from 'vue';

import { page, ship as shipApi } from '@/api/order';
import baseTable from '@/components/base-table/index.vue';
import { formatTime } from '@/utils/format';

const submitForm = ref<any>({});
const modalOpen = ref(false);
const submitFormRef = ref<FormInstanceFunctions>(null);
const table = ref<any>(null);

// 搜索参数
const searchParams = computed(() => [
  {
    key: 'orderNo',
    label: '订单编号',
  },
  {
    key: 'status',
    label: '订单状态',
    valueType: 'select',
    options: [
      { label: '待支付', value: 0 },
      { label: '待发货', value: 1 },
      { label: '已发货', value: 2 },
      { label: '已完成', value: 3 },
      { label: '已取消', value: 4 },
    ],
  },
]);

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '待支付',
    1: '待发货',
    2: '已发货',
    3: '已完成',
    4: '已取消',
  };
  return statusMap[status] || '未知';
};

// 获取状态主题
const getStatusTheme = (status: number): 'default' | 'success' | 'primary' | 'warning' | 'danger' => {
  const themeMap: Record<number, 'default' | 'success' | 'primary' | 'warning' | 'danger'> = {
    0: 'warning',
    1: 'primary',
    2: 'success',
    3: 'success',
    4: 'danger',
  };
  return themeMap[status] || 'default';
};

// 表格列定义
const columns = computed(() => [
  {
    title: '订单编号',
    colKey: 'orderNo',
    width: 200,
  },
  {
    title: '商品名称',
    colKey: 'goodsName',
    width: 200,
  },
  {
    title: '购买数量',
    colKey: 'quantity',
    width: 120,
  },
  {
    title: '总金额',
    colKey: 'totalAmount',
    width: 120,
  },
  {
    title: '订单状态',
    colKey: 'status',
    width: 100,
    cell: (h: any, { row }) => h(Tag, { theme: getStatusTheme(row.status) }, () => getStatusText(row.status)),
  },
  {
    title: '创建时间',
    colKey: 'createTime',
    width: 180,
    cell: (h, { row }) => formatTime(row.createTime),
  },
]);

// 表格列定义（带操作列）
const columnsAction = computed(() => [
  ...columns.value,
  {
    title: '操作',
    colKey: 'op',
    width: 200,
    cell: (h, { row }) => {
      const buttons = [
        h(
          Link,
          {
            theme: 'primary',
            onClick: () => {
              submitForm.value = { ...row };
              modalOpen.value = true;
            },
          },
          () => '查看详情',
        ),
      ];

      // 待发货的订单可以发货
      if (row.status === 1) {
        buttons.push(
          h(
            Link,
            {
              theme: 'success',
              onClick: () => ship(row.id),
            },
            () => '发货',
          ),
        );
      }

      return h(Space, {}, () => buttons);
    },
  },
]);

// 发货
const ship = async (id: number) => {
  try {
    await shipApi(id);
    MessagePlugin.success('发货成功！');
    table.value.onSearch();
  } catch (error) {
    console.error(error);
  }
};

// 刷新
const refresh = () => {
  table.value.onSearch();
};

// 提交表单
const onModalSubmit = () => {
  modalOpen.value = false;
};
</script>

<style lang="less" scoped>
.order-detail {
  padding: 16px;

  .detail-header {
    margin-bottom: 20px;
    text-align: center;

    .goods-cover {
      max-width: 200px;
      max-height: 200px;
      border-radius: 4px;
    }
  }

  .detail-content {
    .detail-item {
      display: flex;
      margin-bottom: 16px;

      .label {
        width: 100px;
        color: #666;
        flex-shrink: 0;
      }

      .value {
        color: #333;
        flex: 1;
      }
    }
  }
}
</style>
